<template>
  <VueDraggable
    ref="el"
    v-model="volunteerInfos"
    :animation="150"
    ghostClass="ghost"
    class="flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
    @end="draggableEnd"
  >
    <div
      class="schoolList"
      v-for="(data, index) in volunteerInfos"
      :key="data.id"
    >
      <div class="flex">
        <div class="schoolList-sequence">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-button link style="font-size: 17px; color: #333"
                >{{ data.vkey }}
                <el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  size="large"
                  v-for="(keyStr, idx) in keys"
                  @click="onClickVolunteerInfoKeysItem(index, idx)"
                  command="a"
                  :key="idx"
                >
                  {{ keyStr }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="schoolList-Left">
          <div class="df" style="align-items: baseline">
            <div style="font-size: 35px; font-weight: bold">
              {{ data.chance }}
            </div>
            <span>%</span>
          </div>
          <div class="schoolList-Left-size">
            {{ data.probabilityExplain }}
          </div>
          <div
            :class="
              data.chance_lv == 1
                ? 'chance1'
                : data.chance_lv == 2
                  ? 'chance2'
                  : 'chance3'
            "
            class="schoolList-Left-number"
          >
            {{ data.chance_lv == 1 ? '冲' : data.chance_lv == 2 ? '稳' : '保' }}
          </div>
        </div>
        <div class="schoolList-Center">
          <div class="schoolName">{{ data.collegeName }}</div>
          <div class="schoolList-size">
            <p>
              代码: {{ data.collegeEnrollCode }} |
              {{ data.features.join(' / ') }} |
              {{
                data.provinceName +
                ' ' +
                data.cityName +
                ' / ' +
                data.categories.join(' / ') +
                ' / ' +
                data.natureType +
                ' / ' +
                '排名' +
                (data.rank <= 0 ? '-' : data.rank)
              }}
            </p>
          </div>
        </div>
        <div class="schoolList-people">
          <div class="schoolList-Number" style="font-size: 35px">
            {{ data.planNum }}<span style="font-size: 12px">人</span>
          </div>
        </div>
        <div class="schoolList-grade">
          <div class="schoolList-grade-left" style="width: 20%">
            <div class="schoolList-grade-size">录取人数</div>
            <div class="schoolList-grade-size">线差</div>
            <div class="schoolList-grade-size">最低分</div>
            <div class="schoolList-grade-size">最低位次</div>
            <div class="schoolList-grade-size schoolList-grade-size-icon">
              <span>等效位差</span>
              <el-tooltip placement="top">
                <template #content>
                  什么是等效位差？
                  <br />
                  历年等效位差根据考生历年的等效位-历年位次的差值得出，
                  <br />
                  换算后的等效位差可更精准的与历年位次进行比较。
                </template>
                <QuestionFilled style="width: 12px; margin-left: 8px" />
              </el-tooltip>
            </div>
          </div>
          <div
            v-for="moreItem in data.moreYear"
            style="width: 27%"
            :key="moreItem.minScore"
          >
            <div class="item-boxs">
              <div class="schoolList-grade-size-number alitem items">
                {{ moreItem.enterNum }}
              </div>
              <div class="schoolList-grade-size-number alitem items">
                {{ moreItem.lineDiff || '-' }}
              </div>
              <div class="schoolList-grade-size-number alitem items">
                {{ moreItem.minScore }}
                <div
                  v-if="
                    (moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                    moreItem.zjText == '有征集'
                  "
                  style="background-color: #fbc7c2; color: red"
                >
                  征
                </div>
              </div>
              <div class="schoolList-grade-size-number alitem items">
                {{ moreItem.minRank }}
              </div>
              <div class="schoolList-grade-size-number alitem items">
                <template
                  v-for="(item, index) in getFormatEquivalentBitDifference(
                    moreItem.equivalentBitDifference,
                  )"
                  :key="index"
                >
                  <span :style="{ color: item.color }">
                    {{ item.text }}
                  </span>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 9%; cursor: pointer" class="cloum alitem center">
          <div class="between" style="width: 53%" v-if="status > 0">
            <el-icon size="20" color="#2990f9">
              <Rank />
            </el-icon>
            <el-popconfirm
              confirm-button-text="删除"
              cancel-button-text="取消"
              icon-color="#626AEF"
              title="确认删除"
              @confirm="onClickDeleteCollege(index)"
            >
              <template #reference>
                <el-icon size="20" color="#2990f9">
                  <Delete />
                </el-icon>
              </template>
            </el-popconfirm>
          </div>

          <div
            style="
              display: flex;
              font-size: 14px;
              margin-top: 10px;
              justify-content: center;
            "
            @click="onClickShowMajors(data)"
          >
            专业 {{ data.majorsInfo.length }} &nbsp;
            <el-icon size="20">
              <ArrowDown v-if="!isShowMajors(data)" />
              <ArrowUp v-else />
            </el-icon>
          </div>
        </div>
      </div>

      <VueDraggable
        ref="el"
        v-model="data.majorsInfo"
        :animation="150"
        ghostClass="ghost"
        class="flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded"
      >
        <div
          v-if="isShowMajors(data)"
          style="display: flex"
          v-for="(major, idx) in data.majorsInfo"
          :key="major.id"
        >
          <div class="schoolList-sequence"></div>
          <div class="schoolList-Left">
            <div>
              <span style="font-size: 35px; font-weight: bold">
                {{ major.chance }}</span
              >
              %
            </div>
            <div class="schoolList-Left-size">
              {{ major.probabilityExplain }}
            </div>
          </div>
          <div class="schoolList-Center">
            <div class="schoolName-size">{{ major.professionRealName }}</div>
            <div class="major-remarkExt-size">{{ major.remarkExt }}</div>
            <div class="schoolList-size">
              <div>
                代码:
                {{
                  major.professionEnrollCode ? major.professionEnrollCode : '-'
                }}
                <span v-if="!!major.mseLevel"> | </span>
                <span v-if="!!major.mseLevel" class="mseLevel">{{
                  major.mseLevel
                }}</span>
              </div>
            </div>
          </div>
          <div class="schoolList-people">
            <div class="schoolList-Number" style="font-size: 35px">
              {{ major.planNum ? major.planNum : '-'
              }}<span style="font-size: 12px">人</span>
            </div>
            <div class="schoolList-title">
              {{
                (major.learnYear ? major.learnYear : '-') +
                '年 ￥' +
                (major.cost ? major.cost : '-')
              }}
            </div>
          </div>
          <div class="schoolList-grade">
            <div class="schoolList-grade-left" style="width: 25%">
              <div class="schoolList-grade-size">录取人数</div>
              <div class="schoolList-grade-size">线差</div>
              <div class="schoolList-grade-size">最低分</div>
              <div class="schoolList-grade-size">最低位次</div>
              <div class="schoolList-grade-size schoolList-grade-size-icon">
                <span>等效位差</span>
                <el-tooltip placement="top">
                  <template #content>
                    什么是等效位差？
                    <br />
                    历年等效位差根据考生历年的等效位-历年位次的差值得出，
                    <br />
                    换算后的等效位差可更精准的与历年位次进行比较。
                  </template>
                  <QuestionFilled style="width: 12px; margin-left: 8px" />
                </el-tooltip>
              </div>
            </div>
            <div
              v-for="moreItem in major.moreYear"
              style="width: 25%"
              :key="moreItem.enterNum"
            >
              <div v-if="moreItem.hasPlan" class="schoolList-grade-left">
                <div class="schoolList-grade-size-number">
                  {{ moreItem.enterNum }}
                </div>
                <div class="schoolList-grade-size-number">
                  {{ moreItem.lineDiff || '-' }}
                </div>
                <div class="schoolList-grade-size-number alitem">
                  {{ moreItem.minScore }}
                  <div
                    v-if="
                      (moreItem.zjText * 1 > 0 && moreItem.minScore * 1 > 0) ||
                      moreItem.zjText == '有征集'
                    "
                    style="background-color: #fbc7c2; color: red"
                  >
                    征
                  </div>
                </div>
                <div class="schoolList-grade-size-number">
                  {{ moreItem.minRank }}
                </div>
                <div class="schoolList-grade-size-number alitem items">
                  <template
                    v-for="(item, index) in getFormatEquivalentBitDifference(
                      moreItem.equivalentBitDifference,
                    )"
                    :key="index"
                  >
                    <span :style="{ color: item.color }">
                      {{ item.text }}
                    </span>
                  </template>
                </div>
              </div>

              <div v-else class="schoolList-grade-left">
                <span
                  class="schoolList-grade-size-number alitem"
                  style="height: 100%"
                  >未招生</span
                >
              </div>
            </div>
          </div>
          <div style="width: 9%; cursor: pointer" class="cloum alitem center">
            <div v-if="status > 0" style="width: 53%" class="between">
              <el-icon size="20" color="#2990f9">
                <Rank />
              </el-icon>
              <el-icon
                size="20"
                color="#2990f9"
                @click="onClickDeleteMajor(index, idx)"
              >
                <Delete />
              </el-icon>
            </div>
          </div>
        </div>
      </VueDraggable>
    </div>
  </VueDraggable>
</template>
<script setup>
import { VueDraggable } from 'vue-draggable-plus';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { ref, watch, computed } from 'vue';
const emits = defineEmits(['changeScInitialLoad']);
import _ from 'lodash';
import { safeFormatEquivalentBitDifference } from '@/utils/formatEquivalentBitDifference.js';

const props = defineProps({
  sortNum: {
    type: Number,
    default: 0,
  },
  status: {
    type: Number,
    default: 0,
  },
});

// 动态获取等效位差的页面结构
const getFormatEquivalentBitDifference = (val) => {
  return safeFormatEquivalentBitDifference(val);
};
// 仓库
const store = useStore();
// 志愿表数据
const volunteerInfos = ref([]);
const storeVolunteerInfos = computed(
  () => store.getters.tianbao.volunteerInfos,
);
const keys = ref([]);
// const equivalents = ref([]);
// 展开查看专业列表的学校ID数组
const showMajorsSchoolIDs = ref([]);

const isInitialLoad = ref(false);

watch(
  () => volunteerInfos.value.map((item) => item.majorsInfo),
  (newValue, oldValue) => {
    if (_.isEqual(newValue, oldValue)) {
      return;
    } else {
      if (oldValue.length) {
        isInitialLoad.value = true;
        emits('changeScInitialLoad', isInitialLoad.value);
      }
    }
  },
);
watch(
  () => storeVolunteerInfos.value,
  (newVal) => {
    formatStoreVolunteerInfos(newVal);
  },
  {
    immediate: true,
  },
);

watch(
  () => props.sortNum,
  () => {
    storeVolunteerInfos.value = store.getters.tianbao.volunteerInfos;
    formatStoreVolunteerInfos(storeVolunteerInfos.value);
  },
);

function formatStoreVolunteerInfos(newVal) {
  if (newVal) {
    if (!Array.isArray(newVal)) {
      for (let key in newVal) {
        let info = newVal[key].collegeData;
        info.majorsInfo = newVal[key].majorsInfo;
        info.vkey = key;
        volunteerInfos.value.push(info);
      }
    } else {
      keys.value = newVal.map((item) => item.vkey);
      volunteerInfos.value = newVal;
    }
  }
}

// 拖拽排序结束
function draggableEnd(event) {
  if (event.oldIndex != event.newIndex) {
    volunteerInfos.value.forEach((item, index) => {
      item.vkey = keys.value[index];
    });

    setVolunteerInfos();
  }
}

function setVolunteerInfos() {
  store.dispatch('tianbao/setVolunteerInfos', [...volunteerInfos.value]);
}

/**
 * 点击调整志愿表序号
 * @param {String} key 院校键
 * @param {String} keyStr 调整到键
 */
function onClickVolunteerInfoKeysItem(index, idx) {
  if (index != idx) {
    let keyArr = keys.value;
    let moveVolunteer = volunteerInfos.value[index];
    moveVolunteer.vkey = keys.value[idx];

    if (idx <= index) {
      for (let i = index; i > idx; i--) {
        volunteerInfos.value[i] = volunteerInfos.value[i - 1];
        volunteerInfos.value[i].vkey = keyArr[i];
      }

      volunteerInfos.value[idx] = moveVolunteer;
    } else {
      for (let i = index; i < idx; i++) {
        volunteerInfos.value[i] = volunteerInfos.value[i + 1];
        volunteerInfos.value[i].vkey = keyArr[i];
      }

      volunteerInfos.value[idx] = moveVolunteer;
    }

    setVolunteerInfos();
  }
}

// 点击展开收起专业列表
function onClickShowMajors(data) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  if (index >= 0) {
    showMajorsSchoolIDs.value.splice(index, 1);
  } else {
    showMajorsSchoolIDs.value.push(data.id);
  }
}

// 是否展开专业列表
function isShowMajors(data) {
  let index = showMajorsSchoolIDs.value.findIndex((item) => item == data.id);
  return index >= 0;
}

// 点击删除填报的院校
function onClickDeleteCollege(index) {
  if (volunteerInfos.value.length == 1) {
    ElMessage({
      message: '请至少保留一个志愿！！！',
      type: 'warning',
    });
    return;
  }

  const keyArr = [
    'A',
    'B',
    'C',
    'D',
    'E',
    'F',
    'G',
    'H',
    'I',
    'J',
    'K',
    'L',
    'M',
    'O',
    'N',
    'P',
    'Q',
    'R',
    'S',
    'T',
    'U',
    'V',
    'W',
    'X',
    'Y',
    'Z',
  ];

  let allKey = volunteerInfos.value.map((item) => item.vkey);
  const volunteerKey = volunteerInfos.value[index].vkey;

  volunteerInfos.value.splice(index, 1);

  keyArr.forEach((key) => {
    if (volunteerKey.includes(key)) {
      const keyArr = allKey.filter((item) => item.includes(key));
      const i = keyArr[keyArr.length - 1];

      allKey = allKey.filter((item) => item != i);
    }
  });

  volunteerInfos.value.forEach((item, index) => {
    item.vkey = allKey[index];
  });

  setVolunteerInfos();
}

/**
 * 点击删除填报的院校专业
 * @param String key 志愿表中院校对应字母key A-Z
 * @param Number majorIdx 院校下专业下标
 */
function onClickDeleteMajor(index, majorIdx) {
  if (volunteerInfos.value[index].majorsInfo.length <= 1) {
    ElMessage({
      message: '请至少保留一个专业',
      type: 'warning',
    });
    return;
  }

  volunteerInfos.value[index].majorsInfo.splice(majorIdx, 1);
  setVolunteerInfos();
}
</script>
<style lang="scss" scoped>
.item-boxs {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  .items {
    height: 20%;
    width: 100%;
    border-bottom: 1px solid #f2f3f5;
    border-right: 1px solid #f2f3f5;
    padding: 10px 4px 10px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
  }
}

.schoolList {
  display: flex;
  flex-direction: column;
  border-right: none;
  background: #fff;
  position: relative;
  border-bottom: 1px solid #e5e6eb;

  .schoolList-look-button {
    color: #165dff;
    width: 90px;
    height: 40px;
    background-color: #fff;
    border: 1px solid #165dff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  .schoolList-grade {
    display: flex;
    width: 40%;

    .schoolList-grade-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;

      .schoolList-grade-size {
        height: 20%;
        padding: 10px 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
      }

      .schoolList-grade-size-number {
        padding: 10px 4px 10px 0;
        text-align: left;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        border-bottom: 1px solid #f2f3f5;
        border-right: 1px solid #f2f3f5;
        padding-left: 10px;
      }

      .schoolList-grade-size-icon {
        align-items: center;
        display: flex;
        flex-direction: row;
      }
    }
  }

  .schoolList-option {
    width: 10%;
  }

  .schoolList-people {
    display: flex;
    width: 9.2%;
    flex-direction: column;
    text-align: center;
    padding: 18px 0;
    border-right: 1px solid #e5e6eb;

    .schoolList-Number {
      text-align: center;
      font-size: 20px;
      font-weight: 400;
      color: #1d2129;
      line-height: 24px;
    }

    .schoolList-title {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 1.5;
    }
  }

  .schoolList-major {
    width: 18%;
    padding: 14px;
    border-right: 1px solid #e5e6eb;

    .schoolList-major-name {
      font-size: 14px;
      font-weight: 500;
      color: #1d2129;
      line-height: 14px;
    }

    .schoolList-major-size {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #4e5969;
      line-height: 24px;
    }

    .schoolList-major-num {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 18px;
    }
  }

  .schoolList-Center {
    width: 32%;
    margin-bottom: 10px;

    .schoolName {
      font-size: 18px;
      font-weight: 500;
      color: #1d2129;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .schoolName-size {
      font-size: 14px;
      font-weight: 400;
      color: #1d212c;
      line-height: 27px;
      margin-left: 20px;
      margin-top: 20px;
    }

    .major-remarkExt-size {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #4e5969;
      line-height: 24px;
      margin-left: 20px;
    }

    .schoolList-major-size {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 400;
      color: #4e5969;
      line-height: 24px;
    }

    .schoolList-size {
      font-size: 12px;
      font-weight: 400;
      color: #86909c;
      line-height: 24px;
      display: flex;
      margin-left: 20px;
      align-items: center;

      .mseLevel {
        background-color: #fbe6e8;
        padding: 2px 4px;
        font-size: 10px;
        color: #f54f4a;
      }
    }

    .schoolList-bottom {
      display: flex;
      margin-left: 20px;
      margin-top: 10px;
      margin-bottom: 10px;

      .schoolList-bottom-size {
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #bcc3cc;
        font-size: 12px;
        font-weight: 400;
        color: #86909c;
        padding: 0 4px;
        margin: 0 4px;
      }
    }
  }

  .schoolList-sequence {
    width: 5%;
    padding-top: 18px;
    padding-left: 10px;
  }

  .schoolList-Left {
    width: 7%;
    padding: 18px 0;
    padding-left: 10px;
    border-right: 1px solid #f2f3f5;

    .schoolList-Left-size {
      text-align: left;
      font-size: 12px;
      font-family:
        PingFang SC-Regular,
        PingFang SC;
      font-weight: 400;
      color: #86909c;
      line-height: 12px;
    }

    .schoolList-Left-number {
      width: 20px;
      height: 20px;
      // background-color: #F53F3F;
      text-align: center;
      line-height: 20px;
      border-radius: 4px;
      color: #fff;
    }
  }
}

.chance1 {
  background-color: #f53f3f;
  margin-top: 10px;
}

.chance2 {
  background-color: #ff8c33;
}

.chance3 {
  background-color: #00bf10;
}
</style>
